<template>
    <div class="user-dynmic-page" :style="{ transform: firstShow ? 'translateX(0)' : null }">
        <div class="title">
            <div class="check-item">
                <div class="item" :class="[active == 'user' && 'active']" @click="changeTypeVal('user')">
                    {{ $t('message.text.member') }}</div>
                <div class="item" :class="[active == 'dyn' && 'active']" @click="changeTypeVal('dyn')">
                    {{ $t('message.text.dynamic') }}</div>
            </div>
            <svg class="close-icon" @click="closeKnowInfo">
                <use xlink:href="#keowledge-danchuangguanbi1"></use>
            </svg>
        </div>
        <div class="user-dynmic-body" v-loading="loading">
            <el-scrollbar ref="userDynRef">
                <template v-if="active == 'user'">
                    <div class="user-item" v-for="(item, index) in personList" :key="index">
                        <div class="user-head">
                            <img :src="item.headImg ? item.headImg : userImg">
                        </div>
                        <span class="user-name">{{ item.name }}</span>
                    </div>
                </template>
                <template v-if="active == 'dyn'">
                    <div class="dyn-item" v-for="(item, index) in dynList" :key="index">
                        <div class="oper-user">
                            <div class="name-info">
                                <img :src="item.userDto.headImg ? item.userDto.headImg : userImg">
                                <span class="name" :title="item.userDto.realName">{{ item.userDto.realName }}</span>
                                <span class="oper-name">{{ item.operationType }}</span>
                            </div>
                            <span class="time">{{ formateTime(item.createTime) }}</span>
                        </div>
                        <div class="dc-info" v-tooltip-auto-show>
                            <el-tooltip :content="item.dcName" effect="light">
                                <span class="dc-box">
                                    <svg class="icon">
                                        <use v-bind:xlink:href="getIcon(item.type, item.nameSuffix)"></use>
                                    </svg>
                                    <span>{{ item.dcName }}</span>
                                </span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="more-loading-box" v-if="dynPage.current != 1 && moreLoading">
                        <img class="refresh-img" src="../../assets/common/loading-page.gif">
                    </div>
                </template>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    nextTick,
    getCurrentInstance
} from 'vue'
import type { ComponentInternalInstance } from 'vue'
import { useRouter } from "vue-router"
import { getLibMember, logPage } from '@/api/knowledge'
import userImg from "@/assets/common/user.png";
import { useHookI18n } from '@/hooks/i18n'
import useCommonStore from '@/store/common'
const commonStore = useCommonStore()
const { locale, $t } = useHookI18n()
const router = useRouter();
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any
const emit = defineEmits(["close"])
const props = defineProps({
    knowInfo: {
        type: Object,
        default() {
            return {}
        }
    }
})
const firstShow = ref(false)
const active = ref('user')
const loading = ref(false)
const personList = ref([])
const dynPage = ref({
    size: 30,
    current: 1,
    total: 0
})
const dynList = ref([])
const userDynRef = ref()
const ScrollbarTop = ref(0)
const moreLoading = ref(false)
onMounted(() => {
    init()
    getDynList(true)
    setTimeout(() => {
        firstShow.value = true
        userDynRef.value.wrapRef.addEventListener("scroll", e => {
            const scrollTop = e.target.scrollTop
            const scrollHeight = e.target.scrollHeight
            const clientHeight = e.target.clientHeight
            if (
                scrollTop > scrollHeight - clientHeight - 10 &&
                scrollTop > ScrollbarTop.value &&
                !moreLoading.value && dynPage.value.current < Math.ceil(dynPage.value.total / dynPage.value.size)
            ) {
                dynPage.value.current++
                getDynList(false)
            }
            ScrollbarTop.value = scrollTop
        })
    }, 100)

})
watch(() => commonStore.lang, () => {
    langChange()
})
async function init() {
    loading.value = true
    getLibMember(props.knowInfo.id, { size: 10000 }).then(res => {
        if (res.data.code == 0) {
            personList.value = res.data.data.records || []
            loading.value = false
        }
    })
}
async function getDynList(isClear) {
    if (isClear) {
        dynList.value = []
        dynPage.value.total = 0
        dynPage.value.current = 1
    }
    moreLoading.value = true
    logPage({
        size: dynPage.value.size,
        current: dynPage.value.current,
        dcLibraryId: props.knowInfo.id
    }).then(res => {
        if (res.data.code == 0) {
            let arr = res.data.data.records || []
            dynList.value.push(...arr)
            dynPage.value.total = res.data.data.total
            moreLoading.value = false
        }
    }).catch(err => {
        moreLoading.value = false
    })
}
function langChange() {
    loading.value = true
    logPage({
        size: dynPage.value.size * dynPage.value.current,
        current: 1,
        dcLibraryId: props.knowInfo.id
    }).then(res => {
        if (res.data.code == 0) {
            dynList.value = res.data.data.records || []
            loading.value = false
        }
    }).catch(err => {
        loading.value = false
    })
}
function closeKnowInfo() {
    emit('close')
}
function changeTypeVal(type) {
    if (type != active.value) {
        active.value = type
    }
}
function formateTime(val) {
    return proxy.$dayjsCalendar(val, {
        lastWeek: "MM.DD HH:mm",
        nextWeek: "MM.DD HH:mm",
        sameElse: "YYYY.MM.DD"
    })
}
</script>
<style lang="scss" scoped>
.user-dynmic-page {
    width: 268px;
    height: 100%;
    transition: transform .2s;
    padding-left: 24px;
    box-sizing: border-box;
    border-left: 1px solid #EEEFF0;
    background-color: #FFFFFF;
    transform: translateX(100%);

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 24px;
        margin-bottom: 16px;

        .check-item {
            display: flex;
            align-items: center;

            .item {
                color: #363B4C;
                font-size: 14px;
                cursor: pointer;
                height: 24px;
                line-height: 24px;
                position: relative;
            }

            .active {
                @include SourceHanSansCN-Bold;

                &::after {
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
                    content: '';
                    width: 100%;
                    height: 2px;
                    background: #363B4C;
                    border-radius: 0px 20px 0px 20px;
                }
            }

            .item+.item {
                margin-left: 24px;
            }
        }

        .title-name {
            font-size: 14px;
            color: #363b4c;
        }

        .close-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
    }

    .user-dynmic-body {
        height: calc(100% - 40px);

        .user-item {
            display: flex;
            align-items: center;
            padding-right: 24px;
            box-sizing: border-box;

            .user-head {
                width: 32px;
                height: 32px;
                min-width: 32px;
                border-radius: 6px 6px 6px 6px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .user-name {
                font-size: 14px;
                color: #494f6a;
                margin-left: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .user-item+.user-item {
            margin-top: 16px;
        }

        .dyn-item {
            padding-right: 24px;
            margin-bottom: 16px;

            .oper-user {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .name-info {
                    display: flex;
                    align-items: center;

                    img {
                        min-width: 24px;
                        width: 24px;
                        height: 24px;
                        border-radius: 6px 6px 6px 6px;
                    }

                    .name {
                        color: #363B4C;
                        margin-left: 8px;
                        font-size: 14px;
                        max-width: 50px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .oper-name {
                        color: #6F7588;
                        font-size: 14px;
                        margin-left: 8px;
                    }
                }

                .time {
                    float: right;
                    font-size: 14px;
                    color: #6f7588;
                }
            }

            .dc-info {
                margin-left: 32px;
                margin-top: 4px;
                width: calc(100% - 32px);
                background: #F4F5F6;
                padding: 0px 8px;
                box-sizing: border-box;
                border-radius: 2px 2px 2px 2px;
                height: 24px;

                ::v-deep(.dc-box) {
                    width: calc(100% - 0px);
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    .icon {
                        width: 14px;
                        min-width: 14px;
                        height: 14px;
                        margin-right: 8px;
                    }

                    span {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }

        .more-loading-box {
            width: 100%;
            padding-right: 24px;
            text-align: center;
            height: 37px;

            // height: 40px;
            img {
                width: 50%;
            }
        }

        // .dyn-item+.dyn-item{
        //     margin-top: 16px;
        // }
    }
}
</style>